@charset "utf-8";
@import "reset.scss";
@import "common.scss";

.wrap{
    header{
        width: 100%;
        height: 1.4933rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
    
        button{
            width: 1.64rem;
            height: .76rem;
            border: 1px solid #ff9344;
            background-color: #fff;
            font-size: .3467rem;
            border-radius: .4rem;
        }
    
        p{
            font-size: .3467rem;
        }
    
        i{
            color: #ff9344;
            font-size: .6933rem;
        }
    }

    main{

        margin-bottom: 1.8rem;
        .toutu{
            width: 9.4rem;
            height: 3.4667rem;
            border: 0px solid black;
            margin: auto;
           

            img{
                width: 100%;
            }
        }

        .jiage{
            width: 9.4rem;
            margin: .4rem auto;
            display: flex;
            justify-content: space-between;


            p{
                font-size: .96rem;
                line-height: .6133rem;
                color: #ff9344;
            }

            button{
                width: 1.48rem;
                height: .8rem;
                border: 1px solid #ff9344;
                border-radius: .4rem;
                background-color: #ff9344;
                color: #fff;
                font-size: .4rem;
            }
        }

        .pingjia{
            width: 9.3333rem;
            margin: auto;
            border: 0px solid black;
            display: flex;
            justify-content: space-between;

            i{
                color: #ff9344;
                margin: .1333rem;
            }

            p{
                &:first-of-type{
                    font-size: .4rem;
                    font-weight: bold;

                    span{
                        color: #ff9344;
                    }
                    
                }

                &:last-of-type{
                    font-size: .3467rem;
                    color: #8e8e8e;
                }
            }
        }

        .biaotilan{
            width: 8.8533rem;
            height: .8933rem;
            background-color: #ff9344;
            color: #fff;
            display: flex;
            justify-content: space-between;
            margin:auto;
            margin-top: .4rem;
            line-height: .8933rem ;

            p{
                &:first-of-type{
                    font-size: .4933rem;
                    text-indent: 0.3em;

                }

                &:last-of-type{
                    font-size: .6267rem;
                }
            }
            
        }

        .shanghu{
            width: 8.8533rem;
            border: 0px solid black;
            margin: auto;
            display: flex;
            position: relative;
            margin-top: .1333rem;

            
            .img{

                position: relative;

                .tubiao{
                    width: 2.36rem;
                    height: .52rem;
                    background: rgba($color: #ffffff, $alpha: 0.67);
                    position: absolute;
                    top: 1.2667rem;

                    p{
                        font-size: .32rem;
                        line-height: .5333rem;
                        text-align: center;
                        color: #000;
                        font-weight: bold;
                    }
                }

                img{
                    width: 2.36rem;
                    height: 2.3467rem;
                }

            }
           

            .text{

                margin-left: .2667rem;
                p{
                    &:first-of-type{
                        font-size: .4rem;
                        font-weight: bold;
                        line-height: .56rem;
                    }

                    &:nth-of-type(2){
                        font-size: .3467rem;
                        color: #929292;
                        line-height: .7067rem;

                        i{
                            color: #ff9344;
                        }
                    }

                    &:nth-of-type(3){
                        font-size: .32rem;
                        color: #929292;
                        line-height: .6133rem;
                    }

                    &:last-of-type{
                        font-size: .2667rem;
                        color: #ff9344;
                        line-height: .56rem;
                    }
                }
            }

            button{
                width: 1.48rem;
                height: .8rem;
                background-color: #ff9344;
                font-size: .4rem;
                line-height: .6rem;
                color: #fff;
                border-radius: .2667rem;
                border: 1px solid #ff9344;
                position: absolute;
                right: 0;
                bottom: .6667rem;
                
            }
        }
    }
}
